<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <!--样式区-->
    <div class="example">原字符串:function(){code} 匹配后的:</div>
    <input type="text" class="text">
    <button class="andothers">含字母、数字和下划线</button>
    <button class="letter">只匹配字母</button>
    <!--显示匹配结果-->
    <div class="result"></div>
</body>
<script>
    //该表达式会匹配字母、数字和下划线，如字符串里有数字和下划线，会对只需匹配字母结果有影响
    const reg1 = /\w+/g;
    //该表达式只匹配字母
    const reg2 = /[a-z]+/gi;
    //样例字符串
    const example = "function(){code}";

    
    const Utils = {
        /**
         * @param str 所要匹配的字符串
         * @param reg 正则表达式
         * @param mode 显示模式函数
         * 
         */
        matching(str,reg,mode){
            let result = str.match(reg);
            for(let i in result){
                mode(result[i]);
            }
        }

    }
    //样例测试执行
    Utils.matching(example, reg1, text =>{
        $('.example').append(text + " ");
    });
    
    //封装点击匹配函数
    /**
     * @param btn 所要点击的按钮
     * @param reg 正则表达式
     * 
     */
    toclick = (btn,reg) =>{
        btn.click(function(){
            Utils.matching( $('.text').val(), reg, text =>{
                $('.result').text(text + " ");
            });
        });
    }
    
    toclick($('.andothers'),reg1);
    toclick($('.letter'),reg2);
</script>
</html>